<template>
	<view class="apply-container">
		<view class="u-p-l-14 u-p-r-14 relative">
			<ApplyCommunityInfo />
		</view>
		<ApplyForm :form="form" :showTypePicker="showTypePicker" @input="onFormInput" @typePicker="showTypePicker = true" />
		<ApplyAgreement :agree="agree" @openAgreement="openAgreement" />
		<ApplyButtonGroup @cancel="onCancel" @submit="onSubmit" />
	</view>
</template>

<script>
import ApplyCommunityInfo from './components/ApplyCommunityInfo.vue'
import ApplyForm from './components/ApplyForm.vue'
import ApplyAgreement from './components/ApplyAgreement.vue'
import ApplyButtonGroup from './components/ApplyButtonGroup.vue'
export default {
	components: {
		ApplyCommunityInfo,
		ApplyForm,
		ApplyAgreement,
		ApplyButtonGroup,
	},
	data() {
		return {
			applyyName: '杭州武林壹号小区',
			form:{
				name:'',
				applicantName:'',
				applicantType:'',
				reason:'',
				address:''
			},
			showTypePicker: false,
			agree: false,
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			// uni.loadFontFace({
			// 	family: 'YouSheBiaoTiHei',
			// 	source: 'url("https://jbgongss.oss-cn-beijing.aliyuncs.com/YouSheBiaoTiHei-Regular.ttf")',
			// })
		},
		openAgreement() {
			uni.navigateTo({ url: '/pages/agreement/index' })
		},
		onCancel() {
			uni.navigateBack();
		},
		onSubmit() {
			if (!this.agree) {
				uni.showToast({ title: '请先同意平台服务协议', icon: 'none' });
				return;
			}
			uni.showToast({ title: '已提交', icon: 'success' });
		},
		onFormInput(form) {
			this.form = form;
		}
	}
}
</script>

<style lang="scss" >
page{
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-grey;
}
.apply-container {
	width: 100%;
	height: 100%;
	padding: 20rpx;
	&-from{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0,0,0,0.03), 0rpx -14rpx 16rpx 0rpx rgba(20,77,169,0.09);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0rpx 30rpx;
		margin-top: -10px;
		z-index: 10000;
		position: relative;
		
	}
	.u-form-item__body{
	
		padding:30rpx 0 !important;
	}

	input{
		color: #E7E6E6;
		text-align: right !important;
	}
	.u-textarea__field{
		    text-align: right;
			
	}

}
</style>